<template>
	<view class="question-page">
		<!-- #ifdef APP -->
		<u-navbar  style="font-size: 34rpx;" title="帮助中心" :autoBack="true" :placeholder="true">></u-navbar>
		<!-- #endif -->
		<view class="contentBox">
			<view class="tab-list">
				<view :class="tabsIndex==index?'tab-item active':'tab-item'" v-for="(item,index) in tabsList"
					:key="index" @click="tabsChange(index)">
					<image :src="item.icon" class="image"></image>
					<view>{{item.name}}</view>
				</view>
			</view>
			<view class="question-list" v-if="dataList.length">
				<view class="question-item" v-for="(item,index) in dataList" :key="index" @click="lookDetail(item)">
					<view class="label">{{item.name}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view v-else class="no-data">
				<u-empty  text="该类型问题不存在"></u-empty>
			</view>
			<view class="button-group">
				<view class="button1">
					<image src="../../static/help/icon_service.png" class="image"></image>
					<!-- #ifdef H5 -->
					<a href="tel:17860901211" class="title">帮助与客服</a>
					<!-- #endif -->
					<!-- #ifdef MP -->
					<view @click="$u.throttle(clickTel,2000)">帮助与客服</view>
					<!-- #endif -->
					<!-- #ifdef APP -->
					<view @click="$u.throttle(dialPhone,2000)">帮助与客服</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<u-popup :show="showDetail" mode="center" round="16" @close="showDetail= false" :safeAreaInsetBottom="false"
			:closeOnClickOverlay="true">
			<view class="popup-detail" v-if="helpDetail">
				<view class="title">{{helpDetail.name}}</view>
				<scroll-view scroll-y="true" class="content">
					<view class="notice" v-html="helpDetail.content"></view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showDetail: false,
				helpDetail: null,
				tabsList: [{
					name: '常见问题',
					status: '1',
					icon: '../../static/help/help1.png'
				}, {
					name: '充值相关',
					status: '2',
					icon: '../../static/help/help2.png'
				}, {
					name: '解锁相关',
					status: '3',
					icon: '../../static/help/help3.png'
				}, {
					name: '佣金相关',
					status: '4',
					icon: '../../static/help/help4.png'
				}],
				tabsIndex: 0,
				dataList: [],
			}
		},
		onLoad(options) {
			this.getQuestiont()
		},
		methods: {
			dialPhone() {
				plus.dial('17860901211', true); // 这里填写要拨打的电话号码，第二个参数表示是否显示拨号界面
			},
			clickTel() {
				uni.makePhoneCall({
					phoneNumber: '17860901211'
				})
			},
			lookDetail(item) {
				this.$Api['common'].getQuestiontDetail({
					article_id: item.id
				}).then(res => {
					this.showDetail = true
					this.helpDetail = res.data
				})
			},
			tabsChange(index) {
				this.tabsIndex = index
				this.getQuestiont()
			},
			getQuestiont() {
				this.$Api['common'].getQuestiont({
					category_id: this.tabsList[this.tabsIndex].status
				}).then(res => {
					this.dataList = res.data.data
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.question-page {
		width: 100%;
		min-height: 100vh;
		background-color: #f7f8fa;
		position: relative;

		.contentBox {
			position: relative;
			z-index: 100;
			min-height: 80vh;
			margin: 20rpx 34rpx;
			padding: 38rpx 40rpx 48rpx;
			box-shadow: 0rpx 4rpx 32rpx 0rpx #FFF0FD;
			border-radius: 32rpx;
			background: linear-gradient(180deg, #FFDAF5 0%, #FFFFFF 5%);

			.tab-list {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.tab-item {
					flex: 1;
					font-weight: 400;
					font-size: 28rpx;
					color: #9A9A9A;
					text-align: center;

					.image {
						width: 72rpx;
						height: 72rpx;
						margin-bottom: 18rpx;
					}
				}

				.active {
					color: #f169f6;
				}
			}

			.no-data {
				text-align: center;
				font-size: 36rpx;
				margin: 100rpx auto 0;
			}

			.question-list {
				background-color: #ffffff;
				border-radius: 20rpx;
				margin-top: 30rpx;

				.question-item {
					padding: 0 22rpx 0 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					height: 88rpx;
					margin-bottom: 20rpx;
					background: #F7F7F7;
					border-radius: 16rpx;
				}
			}


		}

		.popup-detail {
			width: 602rpx;
			box-sizing: border-box;
			padding: 32rpx 32rpx 48rpx;
			background: linear-gradient(180deg, #FFDAF5 0%, #FFFFFF 5%);
			border-radius: 32rpx;
			border: 2rpx solid #707070;
			position: relative;

			.title {
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
				width: 300rpx;
				margin: 0 auto;
			}

			.content {
				height: 520rpx;
				margin-top: 32rpx;
				line-height: 44rpx;
				font-size: 28rpx;
			}
		}

		.button-group {
			.image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}

			.title {
				display: block;
				color: #ffffff;
				text-decoration: none;
			}

			.button1 {
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 160rpx auto 0;
				// margin-bottom: 48rpx;
				width: 638rpx;
				height: 88rpx;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
				background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
				border-radius: 16rpx;
			}
		}
	}
</style>